<template>
  <div class="vxeClass">
    <div style="height:200px;border:1px solid">
      两种表格高度自适应方案
    </div>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane
        key="1"
        tab="vxe表格高度"
      >

        <!-- vxe表格高度自适应： 表格高度设置100%，表格外面加个容器，高度用calc计算 -->
        <div style="height:calc(100vh - 350px);border: 1px solid red">
          <vxe-table
            border
            height="100%"
            :loading="tableLoading"
            show-overflow
            :scroll-y="{ enabled: true, gt: 20 }"
            :column-config="{resizable: true}"
            :row-config="{ isHover: true, drag: true,height:40 }"
            :menu-config="tableMenu"
            @menu-click="contextMenuClickEvent"
            :checkbox-config="{labelField: 'id', highlight: true, range: true}"
            :data="tableData"
          >
            <vxe-column
              type="seq"
              fixed="left"
              width="60"
              drag-sort
            ></vxe-column>
            <vxe-column
              type="checkbox"
              fixed="left"
              title="ID"
              width="140"
            ></vxe-column>
            <vxe-column
              field="name"
              title="Name"
              width="100"
              sortable
            ></vxe-column>
            <vxe-column
              field="sex"
              width="100"
              title="Sex"
              :filters="sexOptions"
              :filter-multiple="false"
              :formatter="formatterSex"
            ></vxe-column>
            <vxe-column
              field="age"
              title="Age"
              width="100"
              sortable
              :filters="ageOptions"
              :filter-method="filterAgeMethod"
            ></vxe-column>
            <vxe-column
              field="long"
              width="200"
              min-width="200"
              fixed="right"
              show-overflow
            >
              <span slot="header">
                擦擦擦擦擦擦擦擦擦擦擦擦擦擦擦擦擦擦
              </span>
            </vxe-column>
            <vxe-column
              field="address"
              width="100"
              fixed="right"
              show-overflow
            >
              <span slot="header">
                是否允许查看体检报告是是是
              </span>
            </vxe-column>
          </vxe-table>
        </div>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="antd -table"
      >
        <!-- antd -table 表格高度自适应： 只设置scroll-y属性，用calc计算 -->
        <a-table
          v-if="false"
          :data-source="tableData"
          :columns="columnsCompanyGroup"
          :pagination="false"
          :scroll="{y:'calc(100vh - 400px)'}"
          style="border:1px solid green;"
        >
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>export default {
  data() {
    return {
      columnsCompanyGroup: [
        {
          title: '哒哒哒哒哒哒',
          dataIndex: 'id'
        },
        {
          title: 'sex',
          dataIndex: 'sex'
        }
      ],
      tableMenu: {
        className: 'my-menus',
        header: {
          options: [
            [
              { code: 'exportAll', name: '导出所有.csv' }
            ]
          ]
        },
        body: {
          options: [
            [
              { code: 'copy', name: 'app.body.label.copy', prefixIcon: 'vxe-icon-copy', className: 'my-copy-item' }
            ],
            [
              { code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete color-red' },
              {
                name: '筛选',
                children: [
                  { code: 'clearFilter', name: '清除筛选' },
                  { code: 'filterSelect', name: '按所选单元格的值筛选' }
                ]
              },
              {
                code: 'sort',
                name: '排序',
                children: [
                  { code: 'clearSort', name: '清除排序' },
                  { code: 'sortAsc', name: '升序', prefixIcon: 'vxe-icon-sort-alpha-asc' },
                  { code: 'sortDesc', name: '倒序', prefixIcon: 'vxe-icon-sort-alpha-desc' }
                ]
              },
              { code: 'print', name: '打印', disabled: true }
            ]
          ]
        },
        footer: {
          options: [
            [
              { code: 'clearAll', name: '清空数据' }
            ]
          ]
        }
      },
      tableLoading: false,
      sexOptions: [
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ],
      ageOptions: [
        { label: '大于16岁', value: 16 },
        { label: '大于26岁', value: 26 },
        { label: '大于30岁', value: 30 }
      ]
    }
  },
  created() {
  },
  computed: {
    tableData() {
      let arr = []
      for (let i = 0; i < 500; i++) {
        arr.push({
          id: i,
          sex: i * i,
          sex: i + 'longlonglonglonglonglonglonglonglonglong',
          name: i * i
        })
      }
      return arr
    }
  },
  methods: {
    contextMenuClickEvent({ menu, row, column }) {
      switch (menu.code) {
        case 'copy':
          this.tableLoading = true
          setTimeout(() => {
            this.tableLoading = false
          }, 2000)
          break
        default:
          VXETable.modal.message(`点击了 ${menu.name} 选项`)
      }
    },
    formatterSex({ cellValue }) {
      let item = this.sexOptions.find(item => item.value === cellValue)
      return item ? item.label : ''
    },
    filterAgeMethod({ value, row, column }) {
      return row.age >= value
    }
  }
}
</script>

<style lang="scss" scoped>
.vxeClass {
  padding: 5px;
  height: 100%;
  border: 1px solid red;
}
</style>
